<template>
  <div id="nav">
    <li v-for="(value,key) in navArr" :key="key" :class="$route.name===value.routeName?'curr':''" @click="changeNav(value)">
      <div>
        <i class="icon iconfont" :class="value.icon"></i>
        <span v-text="value.name"></span>
      </div>
    </li>
  </div>
</template>

<script>
export default {
  name: 'ShopBottomNav',
  data: function () {
    return {
      isShow:false,
      navArr: [
        {name: '首页',routeName:'ShopHome', key: '/ShopHome?id='+this.$route.query.id, icon: 'icon-shouye'},
        {name: '产品',routeName:'ShopProduct', key: '/ShopProduct?id='+this.$route.query.id, icon: 'icon-chanpin'},
        {name: '分类',routeName:'ShopProductClassify', key: '/ShopProductClassify?id='+this.$route.query.id, icon: 'icon-yingyong'},
        {name: '介绍',routeName:'ShopDescription', key: '/ShopDescription?id='+this.$route.query.id, icon: 'icon-ditu'},
      ]
    }
  },
  methods:{
    changeNav:function (value) {
      this.$router.push(value.key)
    }
  }
}
</script>

<style scoped>
#nav {
  position: fixed;
  width: 100%;
  height: 45px;
  padding-top: 5px;
  background: #FFFFFF;
  bottom: 0px;
  display: flex;
  z-index: 9999;
}

#nav > li {
  flex: 1;
  height: 40px;
  line-height: 20px;
  background: #FFFFFF;
  text-align: center;
  position: relative;
}

#nav > li >div > i {
  display: block;
  position: relative;
  top: 4px;
  font-size: 22px;
  color: #888888
}

#nav > li >div > span {
  line-height: 20px;
  position: relative;
  top: 4px;
  color: #333333
}

#nav > li.curr {
}

#nav > li.curr >div > i {
  color: #de081e
}

#nav > li.curr >div > span {
  color: #de081e
}


</style>
